Responsive Layout 101

Build Your First Responsive Layout App in LiveCode Create

This guide will help you create your first responsive layout app in LiveCode Create, step by step. You can follow along with the video or use this written guide to learn the key concepts of responsive layouts.

By the end, you will have a simple app with containers that adapt to different screen sizes, demonstrating the power and flexibility of LiveCode Create's Responsive Layout tools.

---

What You Will Build

You will build a layout using Responsive Layout Containers such as Columns and Rows. These containers will allow objects to stack vertically or horizontally, adapt to screen sizes, and use properties like flex factors and alignment to control spacing and size.

---

Key Features We Will Use

• Layout Containers: Rows and Columns for organizing content.
• Responsive Properties: Settings like cross-axis alignment, container types, and margins.
• Breakpoints: Different layout behaviors for desktop, tablet, and mobile screen sizes.

---

Steps to Build Your Responsive Layout App

1. Create Your First Column

1. Drag a Column:

   • Go to the Tools Palette and drag a Column onto your canvas.

2. Set Column Properties:

   • Open the Property Inspector.
   • Go to the Responsive Layout Tab.
   • Set the following properties:
     • Cross-Axis Alignment: stretch
     • Container Type: fullSize

This will stretch the column to fill the full height and width of your layout.

3. Add a Rounded Rectangle:

   • Drag a Rounded Rectangle into your column.
   • Notice that the rectangle stretches to the full width of the column.

4. Customize the Shape:

   • In the Property Inspector, give the shape a background color (e.g., brand1 theme color).

---

2. Add a Row Inside the Column

1. Drag a Row:

   • Drag a Row into the existing Column.
   • The row will automatically stretch to the width of the column.

2. Add Two Shapes to the Row:

   • Drag two Rounded Rectangles into the row.
   • The two shapes will appear side by side by default.

3. Set Row Properties:

   • Select the Row.
   • In the Responsive Layout Tab, set Cross-Axis Alignment to stretch.

4. Set Shapes to Expanded:

   • Select each shape inside the row.
   • In the Responsive Layout Tab, set Container Type to expanded.
   • This ensures the shapes take up all available space inside the row.

5. Set Colors:

   • Give each shape a different background color for clarity.

---

3. Adjust Flex Factor for Unequal Spacing

1. Select a Shape:

   • Select one of the rounded rectangles inside the row.

2. Set Flex Factor:

   • In the Responsive Layout Tab, set Flex Factor to 2 or 3.
   • This will make the selected shape take up more space compared to the other.

Example:

• One shape has a Flex Factor of 2, and the other has 1.
• This results in a 70/30 split within the row.

---

4. Add More Shapes

1. Drag Two More Shapes:

   • Drag two additional Rounded Rectangles into the original column (below the row).

2. Set Container Type:

   • For the bottom shape, set its Container Type to expanded.

3. Customize Colors:

   • Apply contrasting colors to differentiate the shapes.

---

5. Fix Spacing in Nested Containers

1. Select the Row:

   • In the Responsive Layout Tab, set Spacing to 0.

2. Remove Padding:

   • Select the Row and set Layout Padding to 0.

3. Adjust Margins:

   • Select the inner shapes and set Layout Margins (e.g., 8px for top, bottom, left, and right).

This removes any unwanted spacing caused by nested containers.

---

6. Make Breakpoint-Specific Changes

1. Switch Breakpoints:

   • Use the Breakpoint Buttons in the Canvas Controls to toggle between desktop, tablet, and mobile views.

2. Change Row to Column in Mobile View:

   • Switch to the Mobile Breakpoint.
   • Select the Row.
   • In the Responsive Layout Tab, change its Content Type to column.
   • This stacks the shapes vertically for smaller screens.

3. Adjust Flex Factor:

   • Reset the Flex Factor for both shapes in the row to 1.

---

7. Hide an Object in a Specific Breakpoint

1. Switch to Tablet View:

   • Toggle to the Tablet Breakpoint.

2. Select an Object:

   • Select one of the rounded rectangles.

3. Toggle Visibility:

   • In the General Properties tab, set Visible to false.

This will hide the object in tablet view while keeping it visible in other breakpoints.

---

Previewing Your Responsive Layout

1. Test Breakpoints:
   • Use the Breakpoint Buttons in the Canvas Controls to preview how the layout adapts.
2. Run Your App:
   • Click Run Mode to test your app interactively.

---

Final Responsive Layout

You should now have a responsive layout that:

• Stacks elements vertically in a column.
• Includes a nested row with shapes that expand and use flex factors.
• Adapts to different breakpoints:
  • Desktop: Row stays horizontal.
  • Mobile: Row changes to column.
  • Tablet: One shape is hidden.

---

Conclusion

Congratulations! You've built your first responsive layout app in LiveCode Create. By using Columns, Rows, and responsive properties like Expanded and Flex Factor, you can create apps that adapt beautifully to different screen sizes.

---

For further learning:

• Responsive Layout Guide
• Creating a Layout
• Customizing Widgets